<template>
  <div v-show="enhancement.isActive">
    <div>
      <PanelInputString name="增强提示" v-model="prompt" value=""/>
      <PanelButton name="替换增强" @click="sendPrompt" />
      <PanelButton name="物体擦除" @click="removeObject" />
    </div>

    <!-- 增强结果表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="enhanceResult">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 style="color:black">增强完成</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <button type="button" style="margin-left: 20px" class="btn btn-danger" @click="coverOriginIamge" data-dismiss="modal">
              覆盖原图
            </button>
            <button type="button" style="margin-left: 20px" class="btn btn-primary" @click="saveImage" data-dismiss="modal">
              另存图片
            </button>
            <button type="button" style="margin-left: 20px" class="btn btn-secondary" data-dismiss="modal">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PanelText from "@/components/PanelText";
import PanelInputDropdown from "@/components/PanelInputDropdown";
import PanelInputString from "@/components/PanelInputString";
import PanelButton from "@/components/PanelButton";
import toastrs from "@/mixins/toastrs";
import axios from "axios";
import JQuery from "jquery";
import { mapMutations, mapGetters, mapState } from "vuex";

let $ = JQuery;

export default {
  name: "EnhancementPanel",
  mixins: [toastrs],
  components: { PanelText, PanelInputDropdown, PanelInputString, PanelButton },
  props: {
    enhancement: {
      type: Object,
      required: true
    },
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    },
  },
  data() {
    return {
      prompt: "",
      label: -1,
      originImageId: enhancePonit.image,
      newImageId: 0
    };
  },
  methods: {
    sendPrompt() {
      //console.log(this.enhancePonit.x + " " + this.enhancePonit.y + " " + this.prompt + " " + this.enhancePonit.image)
      axios.post("/api/image/fill", {
        "point_coords": [this.enhancePonit.x + this.width / 2, this.enhancePonit.y + this.height / 2],
        "point_labels": [1],
        "text_prompt": this.prompt,
        "image_id": this.enhancePonit.image
      })
        .then((response) => {
          console.log("增强的结果")
          console.log(response)
          //newImageId = response.
          $("#enhanceResult").modal("show");
        })
        .catch((error) => {
          this.axiosReqestError(
            "替换失败"
          );
        })
    },
    coverOriginIamge() {
      axios.post("/api/image/save_or_not", {
        image_id: this.originImageId,
        image_origin_id: this.newImageId,
        decision: true
      })
      .then((response) => {
        this.axiosReqestSuccess(
          "覆盖成功"
        );
      })
    },
    saveImage() {
      axios.post("/api/image/save_or_not", {
        image_id: this.originImageId,
        image_origin_id: this.newImageId,
        decision: false
      })
      .then((response) => {
        this.axiosReqestSuccess(
          "另存成功"
        );
      })
    },
    removeObject() {
      axios.post("/api/image/remove", {
        "point_coords": [this.enhancePonit.x + this.width / 2, this.enhancePonit.y + this.height / 2],
        "point_labels": [1],
        "image_id": this.enhancePonit.image
      })
      .then((response)=>{
        console.log("移除的结果")
        console.log(response)
        $("#enhanceResult").modal("show");
      })
      .catch((error) => {
          this.axiosReqestError(
            "移除失败"
          );
        })
    }
  },
  computed: {
    ...mapState(["enhancePonit"]),
  }
};
</script>

<style scoped>
.tool-input-group {
  padding-top: 3px;
}

.tool-option-pre {
  background-color: #383c4a;
}

.tool-option-font {
  border-color: #4b5162;
  background-color: #383c4a;
  color: white;
  font-size: 12px;
  height: 20px;
}

.tool-option-input {
  display: table-cell;
  border-color: #4b5162;
  color: white;
  padding: 0 0 0 3px;
  background-color: #383c4a;
  font-size: 12px;
  height: 20px;
}
</style>